<script>
import GoodsItem from '@/components/GoodsItem.vue';
import { goodsListFn } from '@/api/search'
export default {
  name: 'SearchList',
  data() {
    return {
      page: 1,
      proList: [],
      isSelect: false,
      ati: 1,
      wxn: true,
    }
  },
  methods: {
    getGoodsList(sortType, sortPrice) {
      goodsListFn({ goodsName: this.searchValue, page: this.page, categoryId: this.$route.query.categoryId, sortType, sortPrice }).then(res => {
        // console.log(res);
        const { data: { list } } = res
        this.proList = list.data
      })
    },
    trueSort(value) {
      this.ati = 3
      if (value === 100) {
        this.isSelect = true
        this.getGoodsList()

      }
      else if (value === 101) {
        this.isSelect = false
        this.getGoodsList('price', 1)
      }
    },
    sort(canshu) {
      // console.log(canshu);

      if (canshu === 'all') {
        this.ati = 1
        this.isSelect = false
        this.getGoodsList()
      }
      else if (canshu === 'sales') {
        this.isSelect = false
        this.ati = 2
        this.getGoodsList(canshu)
      }
      else if (canshu === 'price') {

        this.ati = 3
        this.isSelect = !this.isSelect
        // console.log(this.isSelect);

        if (!this.isSelect) {
          this.getGoodsList(canshu, 1)
          return
        }
        this.getGoodsList(canshu)

      }


    }
  },
  components: {
    GoodsItem
  },
  computed: {
    searchValue: {
      get() {
        return this.$route.query.key || ''
      },
      set(value) {
        if (!value) return
        this.$router.push({
          path: '/searchlist',
          query: {
            key: value
          }
        })
      }

    },


  },
  mounted() {

    // console.log(this.$route.query.key)
    this.getGoodsList()

  }

};
</script>

<template>
  <div class="search">
    <van-nav-bar fixed title="商品列表" left-arrow @click-left="$router.go(-1)" />

    <van-search shape="round" background="#fff" v-model="searchValue" show-action @blur="getGoodsList">
      <template #action>
        <van-icon class="tool" name="apps-o" @click="wxn = !wxn" />
      </template>
    </van-search>

    <div class="sort-btns">
      <div class="sort-item" :class="{ activeicon: ati === 1 }" @click="sort('all')">综合</div>
      <div class="sort-item" :class="{ activeicon: ati === 2 }" @click="sort('sales')">销量</div>
      <div :class="{ activeicon: ati === 3 }" class="sort-item sortIcon">
        <span @click="sort('price')">价格</span>
        <div>
          <van-icon size="10" name="arrow-up" :class="{ activeIcon: ati === 3 ? isSelect : false }"
            @click="trueSort(100)" />
          <van-icon @click="trueSort(101)" size="10" name="arrow-down"
            :class="{ activeIcon: ati === 3 ? !isSelect : false }" />
        </div>
      </div>
    </div>

    <div class="goods-list" :class="{ hy: wxn }">
      <GoodsItem class="zizujian" v-for="item in proList" :key="item.goods_id" :item="item" :wxn="wxn"></GoodsItem>
    </div>

  </div>
</template>

<style lang="scss" scoped>
.search {
  padding-top: 46px;

  ::v-deep .van-icon-arrow-left {
    color: #333;
  }

  .tool {
    font-size: 24px;
    height: 40px;
    line-height: 40px;
  }

  .sort-btns {
    display: flex;
    height: 36px;
    line-height: 36px;

    .sort-item {
      text-align: center;
      flex: 1;
      font-size: 14px;
      // 
    }

    .activeicon {
      color: #f66
    }

    .sortIcon {

      display: flex;
      align-items: center;
      justify-content: center;

      div {
        display: flex;
        flex-direction: column;

        margin-left: 8px;
        color: #000;

        .activeIcon {
          color: #f66;
        }
      }
    }
  }
}

// 商品样式
// .goods-list {
//   // background-color: #f6f6f6;
// }

.hy {
  display: flex;
  flex-wrap: wrap;

  .zizujian {
    width: 50%;
  }
}
</style>